<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <base href=".">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <title>简历-基本信息</title>
    <link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/common.css">

    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js?v=1.1"></script>
    <script src="../js/http.js?v=1.1"></script>

    <script src="../tool/mobisrcoll/mobiscroll_002.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_004.js" type="text/javascript"></script>
    <link href="../tool/mobisrcoll/mobiscroll_002.css" rel="stylesheet" type="text/css"/>
    <script src="../tool/mobisrcoll/mobiscroll.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_003.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_005.js" type="text/javascript"></script>
    <link href="../tool/mobisrcoll/mobiscroll_003.css" rel="stylesheet" type="text/css">
    <!--
    <link href="../tool/mobisrcoll/mobiscroll.css" rel="stylesheet" type="text/css"/>

    -->
    <style>
        * {
            text-shadow: none;
            font-family: '微软雅黑';
            -webkit-overflow-scrolling: touch;
        }

        #titleButton {
            height: 30px;
            color: #ffffff;
            background: #ee721a;
            width: 17%;
            font-size: 15px;
            position: absolute;
            top: 7px;
            left: 10px;
            border: 1px solid #df7100;
        }

        #getmsg div {
            padding-top: 17px;
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
            z-index: 200;
        }

        .modal {
            width: 70%;
            height: 100%;
            background: #ffffff;
            position: fixed;
            top: 0;
            left: 30%;
            z-index: 1000;
            -webkit-overflow-scrolling: touch;
        }

        .modal .title {
            color: #ffffff;
            background: #ee721a;
            font-size: 17px;
            padding: 10px 20px 10px 20px;
            border-bottom: 1px solid #e0e0e0;
            text-align: right;
        }

        .modal .row {
            color: #808080;
            /*width:100%;*/
            font-size: 17px;
            padding: 10px 20px 10px 20px;
            border-bottom: 1px solid #e0e0e0;
            text-align: center;
        }

        .modal .row:hover {
            color: #ffffff;
            background: #ee721a;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        .td_1 {
            text-align: center;
            width: 30%;
            height: 44px;
            font-size: 17px;
            border: 1px solid #C0C0C0;
            background: #EFEFEF;
        }

        .td_2 {
            position: relative;
            width: 70%;
            height: 44px;
            font-size: 15px;
            border: 1px solid #C0C0C0;
        }

        .td_2 span {
            margin-left: 20px;
            font-size: 17px;
            color: #808080;
        }

        .td_2 div {
            margin-left: 50px;
            font-size: 17px;
            color: #808080;
        }

        .must {
            color: red;
        }

        img {
            position: absolute;
            top: 20px;
            left: 85%;
            width: 7px;
            height: 12px
        }

        .delay {
            width: 50%;
            height: 25%;
            background: #ffffff;
            position: fixed;
            top: 25%;
            left: 25%;
            z-index: 1000;
            display: none;
            border-radius: 10px;
            text-align: center;
        }

        .delay p {
            margin-top: 50px;
        }
    </style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" id="testpage" style="min-height: 600px; background: rgb(213, 213, 213);" data-url="testpage"
     tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
    <div style="position:fixed;left:0;top:0;width:100%;z-index:200;">
        <div data-role="header"
             style="height:43px;background-color:#ee721a;margin-top:-2px;text-align:center;padding:1px" role="banner"
             class="ui-header ui-bar-inherit">
            <p style="font-size: 18px;color:#FFFFFF;margin-top: 8px;">我的简历</p>
            <button id="titleButton" style="padding: 5px 0 5px 0;text-shadow: none;"
                    onclick="common.goTo('/html/resume.html')"
                    class="ui-btn-left ui-btn ui-shadow ui-corner-all">返回
            </button>
            <button id="save">保存</button>
        </div>
    </div>
    <div style="height:43px;background-color:#ee721a;">
    </div>
    <p style="font-size: 18px;margin:10px 0 5px 20px;">个人资料</p>

    <div style="background:#ffffff;padding:1px">
        <table>
            <tbody>
            <tr>
                <td class="td_1"><span class="must">*</span><span>姓名</span></td>
                <td class="td_2">
                    <input id="realName"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;width:80%;"
                           placeholder="请输入您的姓名" data-role="none" type="text">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>性别</span></td>
                <td class="td_2" id="td_sex">
                    <input id="sex" style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;"
                           data-role="none" type="text" value="" readonly placeholder="请输入您的性别">
                    <img src="../image/right.png" alt="">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>出生年月</span></td>
                <td class="td_2"><input id="birthday"
                                        style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;"
                                        data-role="none" type="text" value="" readonly placeholder="请输入您的出生年月"></td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>现居住地</span></td>
                <td class="td_2" id="td_livePlace">
                    <input id="livePlace"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;width:80%;"
                           data-role="none" type="text" value="" placeholder="请输入您的现居住地">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>籍贯</span></td>
                <td class="td_2" id="td_orginPlace">
                    <input id="orginPlace"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;width:80%;"
                           data-role="none" type="text" value="" placeholder="请输入您的籍贯">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>婚姻状况</span></td>
                <td class="td_2" id="td_marryStatus">
                    <input id="marryStatus"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;width:80%;"
                           data-role="none" type="text" value="" placeholder="请输入您的婚姻状况">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>政治面貌</span></td>
                <td class="td_2" id="td_politicalStatus">
                    <input id="politicalStatus"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080;width:80%;"
                           data-role="none" type="text" value="" placeholder="请输入您的政治面貌">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>工作经历</span></td>
                <td class="td_2" id="td_workExp">
                    <input id="workExp" style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080"
                           data-role="none" type="text" value="" readonly placeholder="请输入您的工作经历">
                    <img src="../image/right.png" alt="">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>最高学历</span></td>
                <td class="td_2" id="td_degree">
                    <input id="degree" style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080"
                           data-role="none" type="text" value="" readonly placeholder="请输入您的最高学历">
                    <img src="../image/right.png" alt="">
                </td>
            </tr>

            <tr>
                <td class="td_1"><span class="must">*</span><span>电子邮箱</span></td>
                <td class="td_2">
                    <input id="emailAddress"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入您的常用电子邮箱" data-role="none" type="text">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span>身份证号</span></td>
                <td class="td_2">
                    <input id="idNumber"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入您的身份证号" data-role="none" type="tel">
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="modal" id="sex_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">男</div>
        <div class="row">女</div>
    </div>
    <div id="overlay"></div>
    <div class="modal" id="start_select" style="display:none;-webkit-overflow-scrolling: touch;">
        <div class="title">取消</div>
        <div class="row">随时到岗</div>
        <div class="row">一周以内</div>
        <div class="row">一月以内</div>
        <div class="row">其他</div>
    </div>
    <div class="modal" id="workExp_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">应届毕业生</div>
        <div class="row">1年以下</div>
        <div class="row">1-3年</div>
        <div class="row">3-5年</div>
        <div class="row">5-10年</div>
        <div class="row">10-25年</div>
        <div class="row">25年以上</div>
    </div>
    <div class="modal" id="degree_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">博士</div>
        <div class="row">硕士/MBA/EMBA</div>
        <div class="row">本科</div>
        <div class="row">大专/高职</div>
        <div class="row">高中/中专/中技</div>
        <div class="row">初中</div>
        <div class="row">小学</div>
        <div class="row">其他</div>
    </div>
    <div class="modal" id="marryStatus_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">未婚</div>
        <div class="row">已婚</div>
        <div class="row">离婚</div>
    </div>
    <div class="modal" id="politicalStatus_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">党员</div>
        <div class="row">预备党员</div>
        <div class="row">团员</div>
        <div class="row">群众</div>
        <div class="row">民主党派</div>
        <div class="row">其他</div>
    </div>
    <div class="modal" id="livePlace_select" style="display:none">
        <div class="title">取消</div>
        <div class="row">杭州-西湖区</div>
        <div class="row">江干区</div>
        <div class="row">滨江区</div>
        <div class="row">上城区</div>
        <div class="row">下城区</div>
        <div class="row">新余杭区-临平</div>
        <div class="row">老余杭-城西</div>
        <div class="row">拱墅区</div>
        <div class="row">萧山区</div>
        <div class="row">刚来杭州随时可换</div>
        <div class="row">即将来杭州</div>
    </div>	
    <div class="delay"><p>正在保存请稍等...</p></div>
</div>
<input type="hidden" id="userId">
<script type="text/javascript">
    $(document).ready(function () {
        common.userSession();

        function getResumeBasic() {
            http.get({
                url: common.sctx + '/personal/resume/basic.do',
                success: function (data) {
                    $("#realName").val(data.name);
                    if (data) {
                        $("#sex").val(data.gender);
                        $("#birthday").val(data.birthday);
                        $("#livePlace").val(data.livingAddress);
                        $("#orginPlace").val(data.nativePlace);
                        $("#workExp").val(data.workTime);
                        $("#degree").val(data.education);
                        $("#emailAddress").val(data.email);
                        $("#idNumber").val(data.idCardNo);
                        $("#marryStatus").val(data.marryStatus);
                        $("#politicalStatus").val(data.politicalStatus);
                    }
                }
            });
        }

        function initDateSelect() {
            var currYear = (new Date()).getFullYear();
            var opt = {};
            opt.date = {preset: 'date'};
            opt.datetime = {preset: 'datetime'};
            opt.time = {preset: 'time'};
            opt.default = {
                theme: 'android-ics light', //皮肤样式
                display: 'modal', //显示方式
                mode: 'scroller', //日期选择模式
                dateFormat: 'yyyy-mm-dd',
                lang: 'zh',
                showNow: true,
                nowText: "今天",
                startYear: currYear - 50, //开始年份
                endYear: currYear + 10 //结束年份
            };
            $("#birthday").mobiscroll($.extend(opt['date'], opt['default']));
        };

        function initSelect(a, b, c, d) {
            $(a).click(function () {
                $("#overlay").css({"display": "block"});
                $(c).css({"display": "block"});
            });
            $(c).find(".title").click(function () {
                $("#overlay").css({"display": "none"});
                $(c).css({"display": "none"});
            });
            $(b).click(function () {
                $(this).css({"background": "#00a2df", "color": "#ffffff"});
                $(this).siblings(".row").css({"background": "#ffffff", "color": "#808080"});
                setTimeout(function () {
                    $("#overlay").css({"display": "none"});
                    $(c).css({"display": "none"});
                }, 300);
                $(d).val($(this).text());
            });
        };

        function saveResumeData() {
            var realName = $("#realName").val();
            var sex = $("#sex").val();
            var birthday = $("#birthday").val();
            var livePlace = $("#livePlace").val();
            var workExp = $("#workExp").val();
            var degree = $("#degree").val();
            var emailAddress = $("#emailAddress").val();
            var marryStatus = $("#marryStatus").val();
            var politicalStatus = $("#politicalStatus").val();

            if (realName === '' ||
                sex === '' ||
                birthday === '' ||
                workExp === '' ||
                degree === '' ||
                marryStatus === '' ||
                politicalStatus === '' ||
                livePlace === '' ||
                emailAddress === '') {
                alert("请完整填写资料");
                return false;
            }
            if (emailAddress.indexOf('@') === -1) {
                alert("E-mail格式填写不正确");
                return false;
            }

            var idNumber = $("#idNumber").val();
            var orginPlace = $("#orginPlace").val();

            var resume = {
                "name": realName,
                "gender": sex,
                "birthday": birthday,
                "livingAddress": livePlace,
                "nativePlace": orginPlace,
                "marryStatus": marryStatus,
                "politicalStatus": politicalStatus,
                "workTime": workExp,
                "education": degree,
                "idCardNo": idNumber,
                "email": emailAddress
            };

            $("#overlay").css({"display": "block"});
            $(".delay").css({"display": "block"});

            http.post({
                url: common.sctx + "/personal/resume/save.do",
                data: resume,
                success: function () {
                    window.location.href = common.ctx + "/html/resume.html?v="+((new Date()).getTime());
                },
                error: function () {
                    alert("保存失败!稍后重试.");
                    window.location.href = common.ctx + "/html/resume.html?v="+((new Date()).getTime());
                }
            });

            setTimeout(function(){ window.location.href = common.ctx + "/html/resume.html?v="+((new Date()).getTime()); }, 3000);
        }

        getResumeBasic();

        initDateSelect();
        initSelect("#td_sex", "#sex_select .row", "#sex_select", "#sex");
        initSelect("#td_startTime", "#start_select .row", "#start_select", "#startTime");
        initSelect("#td_workExp", "#workExp_select .row", "#workExp_select", "#workExp");
        initSelect("#td_degree", "#degree_select .row", "#degree_select", "#degree");
        initSelect("#td_livePlace", "#livePlace_select .row", "#livePlace_select", "#livePlace");
        initSelect("#td_marryStatus", "#marryStatus_select .row", "#marryStatus_select", "#marryStatus");
        initSelect("#td_politicalStatus", "#politicalStatus_select .row", "#politicalStatus_select", "#politicalStatus");


        $("#yixiang").click(function () {
            $("body").append("<div id='lean_overlay'></div>");
            $("#con6").css({"display": "block"});
        });

        $("#con6 div").click(function () {
            if ($(this).attr("name") === 2) {
                $(this).css({"background": "#E97500", "color": "#ffffff"});
                $(this).attr("name", "1");
            } else {
                $(this).css({"background": "#ffffff", "color": "#808080"});
                $(this).attr("name", "2");
            }
        });

        $("#submit6").click(function () {
            $("#lean_overlay").remove();
            $("#btn6").empty();
            $("#con6 div").each(function () {
                if ($(this).attr("name") === 1) {
                    $("#btn6").append($(this).text() + '|');
                }
            })
            $("#con6").css({"display": "none"});
        });

        $("#heightId").blur(function () {
            var height = $('#heightId').val();
            if (height > 255) {
                $("#height").append("<span id='msg' style='color:red'>输入有误!</span>")
            } else {
                $("#msg").remove();
            }
        });

        $("#save").click(function () {
            saveResumeData();
        });

        $("input,select").blur(function () {
            setTimeout(function () {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        });
    });

</script>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
    <h1>loading</h1></div>
</body>
</html>
